<template>
  <div>
    <Back />
    <div class="wk" v-for="item in list" :key="item.teacherId">
      <img :src="url+item.teacherImg" />
      <dl>
        <dd>
          <h2>{{ item.teacherName }}</h2>
        </dd>
        <dd>领域{{ item.teacherSynopsis }}</dd>
        <dd>
          <ul>
            <li>课程{{ item.teacherCourseNum }}</li>
            <li>技巧{{ item.teacherShareNum }}</li>
            <li>文章{{ item.teacherOriginalNum }}</li>
            <li>粉丝{{ item.teacherFansNum }}</li>
          </ul>
        </dd>
      </dl>
      <button v-if="!item.attention" @click="() => follow(item)">关注</button>
      <button v-if="item.attention" @click="() => nofollow(item)">
        取消关注
      </button>
    </div>
  </div>
</template>

<script>
import { getFollow } from "../../../api/index";
import { delFollow } from "../../../api/index";
import { addFollow } from "../../../api/index";
export default {
  data() {
    return {
      id: this.$store.state.id,
      list: [],
      url:"http://192.168.10.32/cuihe/img/",
    };
  },
  created() {
    getFollow({
      userId: this.id
    }).then((res) => {
      this.list = res.data.data;
    });
  },
  methods: {
    nofollow(item) {
      item.attention = false;
      delFollow({
        userId: this.id,
        dataId: item.teacherId,
        a: 0,
      }).then((res) => {
      });
    },
    follow(item) {
      item.attention = true;
      addFollow({
        userId: this.id,
        dataId: item.teacherId,
      }).then((res) => {
      });
    },
  },
};
</script>

<style scoped>
.wk {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.2vw solid #ccc;
  margin-top: 5vw;
  height: 30vw;
}
.wk img {
  width: 18vw;
  height: 18vw;
  margin: 0 5vw;
}
.wk dl{
  margin-right: 3vw;
  font-size: 3vw;
  line-height: 4vw;
}
dd h2 {
  font-size: 4vw;
  margin: 3vw 0;
}
dd {
  font-size: 2.5vw;
}
ul {
  height: 3vw;
  padding: 0;
  margin: 3vw 0;
}
li {
  list-style: none;
  float: left;
  padding: 0 2vw;
  margin: 0;
  border-right: 0.3vw solid #ccc;
}
li:first-of-type {
  padding-left: 0;
}
.wk button {
  background: #6d8aff;
  width: 25vw;
  margin-right: 3vw;
  height: 5vw;
  border: none;
  color: #fff;
  font-size: 2vw;
  border-radius: 3vw;
}
</style>